<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听事件</title>
		<div id="div">
			<input type="button" id="btn" value="监听按钮"></input>
		</div>
	</head>
	<body>
		<script type="text/javascript">
		var button= document.getElementById("btn");
		var div=document.getElementById("div");
		//浏览器兼容
		function clickme(event) {
				alert("事件被触发");
				event.stopPropagation();//阻止事件冒泡
			}
		function clickdiv() {
			alert("div事件被触发");
		}
		var eventUtil={
			//添加事件
		addHandler:function(element,type,handler){
				if(element.addEventListener){
					element.addEventListener(type,handler,false);
				}
				else if(element.attachEvent){
					element.attachEvent('on'+type,handler);
				}else{
							element['on'+type]=handler;
				}
			},
			//移除事件
			removeHandler:function(element,type,handler){
				if(element.removeListener){
					element.removeListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent('on'+type,handler);
				}else{
					element['on'+type]=null;
				}
			}
		};
		eventUtil.addHandler(button,'click',clickme);
		eventUtil.addHandler(div,'click',clickdiv);
		</script>
	</body>
</html>